<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Academic Poster Generator</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container py-5">
        <h1 class="text-center mb-4">Academic Poster Generator</h1>
        <div class="card shadow">
            <div class="card-body">
                <form id="posterForm" method="post" action="/generate" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="title" class="form-label">论文标题</label>
                        <input type="text" class="form-control" id="title" name="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="authors" class="form-label">作者</label>
                        <input type="text" class="form-control" id="authors" name="authors" required>
                    </div>
                    <div class="mb-3">
                        <label for="abstract" class="form-label">摘要</label>
                        <textarea class="form-control" id="abstract" name="abstract" rows="4" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="paper_file" class="form-label">论文PDF（可选）</label>
                        <input type="file" class="form-control" id="paper_file" name="paper_file" accept=".pdf">
                    </div>
                    <div class="mb-3">
                        <label for="style" class="form-label">海报风格</label>
                        <select class="form-select" id="style" name="style">
                            {% for style in styles %}
                            <option value="{{ style }}">{{ style|capitalize }}</option>
                            {% endfor %}
                            <option value="custom">自定义</option>
                        </select>
                    </div>
                    <div class="mb-3" id="customStyleDiv" style="display: none;">
                        <label for="custom_style" class="form-label">自定义风格描述</label>
                        <textarea class="form-control" id="custom_style" name="custom_style" rows="3" placeholder="例如：简约设计，深蓝色调，包含几何元素..."></textarea>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary" id="generateBtn">生成海报</button>
                    </div>
                </form>
            </div>
        </div>

        <div id="resultCard" class="card mt-4 shadow" style="display: none;">
            <div class="card-body text-center">
                <h2 class="card-title">生成结果</h2>
                <div class="my-4">
                    <img id="posterPreview" class="img-fluid border shadow" style="max-height: 600px; max-width: 100%; object-fit: contain;" alt="海报预览">
                </div>
                <div class="d-grid gap-2 d-md-block">
                    <a id="downloadBtn" class="btn btn-success" href="#">下载海报 (PDF)</a>
                    <a id="downloadBgBtn" class="btn btn-primary" href="#" style="display: none;">下载背景图片 (JPG)</a>
                    <button id="newPosterBtn" class="btn btn-outline-primary">创建新海报</button>
                </div>
                
                <!-- 删除这段重复的脚本代码 -->
                <script>
                    // 在处理响应的地方修改
                    if (data.success) {
                        // 否则在当前页面显示结果
                        posterPreview.src = data.preview_url;
                        
                        // 修改下载链接，使用专用的下载路由
                        const posterFilename = data.poster_url.split('/').pop();
                        downloadBtn.href = `/download/${posterFilename}`;
                        
                        if (data.background_url) {
                            const bgFilename = data.background_url.split('/').pop();
                            downloadBgBtn.href = `/download/${bgFilename}`;
                            downloadBgBtn.style.display = 'inline-block';
                        } else {
                            downloadBgBtn.style.display = 'none';
                        }
                        
                        resultCard.style.display = 'block';
                        window.scrollTo({
                            top: resultCard.offsetTop,
                            behavior: 'smooth'
                        });
                    }
                </script>
            </div>
        </div>
    </div>

    <div id="loadingModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-5">
                    <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <h4>生成中，请稍候...</h4>
                    <p class="text-muted">正在分析论文内容并创建海报，这可能需要一分钟左右。</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const styleSelect = document.getElementById('style');
            const customStyleDiv = document.getElementById('customStyleDiv');
            const posterForm = document.getElementById('posterForm');
            const resultCard = document.getElementById('resultCard');
            const posterPreview = document.getElementById('posterPreview');
            const downloadBtn = document.getElementById('downloadBtn');
            const newPosterBtn = document.getElementById('newPosterBtn');
            const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));

            // 切换自定义风格描述区域
            styleSelect.addEventListener('change', function() {
                if (this.value === 'custom') {
                    customStyleDiv.style.display = 'block';
                } else {
                    customStyleDiv.style.display = 'none';
                }
            });

            // 表单提交
            posterForm.addEventListener('submit', function(e) {
                e.preventDefault();
                loadingModal.show();

                const formData = new FormData(this);

                fetch('/generate', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    loadingModal.hide();

                    // 在现有的JavaScript代码中添加
                    const downloadBgBtn = document.getElementById('downloadBgBtn');
                    
                    // 在处理响应的地方添加
                    if (data.success) {
                        // 如果有重定向URL，跳转到结果页面
                        if (data.redirect_url) {
                            window.location.href = data.redirect_url;
                            return;
                        }
                        
                        // 否则在当前页面显示结果
                        posterPreview.src = data.preview_url;
                        
                        // 修改下载链接，使用专用的下载路由
                        const posterFilename = data.poster_url.split('/').pop();
                        downloadBtn.href = `/download/${posterFilename}`;
                        
                        if (data.background_url) {
                            const bgFilename = data.background_url.split('/').pop();
                            downloadBgBtn.href = `/download/${bgFilename}`;
                            downloadBgBtn.style.display = 'inline-block';
                        } else {
                            downloadBgBtn.style.display = 'none';
                        }
                        
                        resultCard.style.display = 'block';
                        window.scrollTo({
                            top: resultCard.offsetTop,
                            behavior: 'smooth'
                        });
                    }
                    else {
                        alert('生成失败: ' + data.error);
                    }
                })
                .catch(error => {
                    loadingModal.hide();
                    alert('发生错误: ' + error);
                });
            });

            // 创建新海报按钮
            newPosterBtn.addEventListener('click', function() {
                posterForm.reset();
                customStyleDiv.style.display = 'none';
                resultCard.style.display = 'none';
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>